<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" th:href="@{/static/iview/iview.css}" />
        <link rel="stylesheet" type="text/css" th:href="@{/static/iview/iview-custom.css}" />
    </head>
    <body>
        <div id="contentContainer" width="100%" height="100%" style="margin:15px">
            <Row>
                <i-col span="3" style="background-color:#f8f8f9;padding-left:15px">
                    <Tree ref="tree" :data="vueSetRoleTreeData"  v-on:on-select-change="onSelectChangeTree">
                    </Tree>
                </i-col>
                <i-col span="20">
                    <!-- 数据表格 -->
                    <i-table border="true" :context="self" :columns="vueTableColumns" :data="vueTableData" v-on:on-selection-change="getCheckedTableRow($event)"></i-table>
                    <!-- 分页标签 -->
                    <div style="margin:10px;overflow:hidden">
                        <div style="float:right">
                            <Page show-total="true" :page-size="vuePageSize" :total="vueRecordTotal" :current="vueCurrentPage" v-on:on-change="doPageTurning($event)"></Page>
                        </div>
                    </div>
                </i-col>
            </Row>

            <!-- 设置 -->
            <Modal width="500" v-model="vueSetRoleModalVisible" :styles="{top:'50px'}"
                   title="设置角色" v-on:on-cancel="cancelSetRoleForm()">
                <i-form ref="vueSetRoleFormData" :model="vueSetRoleFormData" :label-width="80">
                    <Form-item label="昵    称" prop="nickName">
                        <i-input v-model="vueSetRoleFormData.nickName" disabled="true"></i-input>
                    </Form-item>
                    <Form-item label="用户名称" prop="userName">
                        <i-input v-model="vueSetRoleFormData.userName" disabled="true"></i-input>
                    </Form-item>

                    <Form-item label="角    色" prop="userRoles">
                        <Checkbox-group v-model="vueSetRoleFormData.userRoles">
                            <Checkbox v-for="role in vueSetRoleFormData.allRoles" :label="role.name"></Checkbox>
                        </Checkbox-group>
                    </Form-item>
                </i-form>
                <div slot="footer">
                    <i-button type="primary" v-on:click="submitSetRoleForm()">提交</i-button>
                    <i-button type="ghost" v-on:click="cancelSetRoleForm()" style="margin-left:8px">取消</i-button>
                </div>
            </Modal>

        </div>

        <script th:src="@{/static/js/utils/table-utils.js}"></script>
        <script th:src="@{/static/js/utils/form-utils.js}"></script>
        <script th:src="@{/static/js/utils/iview-utils.js}"></script>

        <script th:src="@{/static/js/business/role-user-biz.js}"></script>
    </body>
</html>
